"use client";

import { useState, useEffect } from "react";
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";
import { Palette, Check } from "lucide-react";
import { themes, getCurrentTheme, setCurrentTheme, type Theme } from "@/lib/themes";

interface ThemeSwitcherProps {
  className?: string;
}

export function ThemeSwitcher({ className }: ThemeSwitcherProps) {
  const [currentTheme, setCurrentThemeState] = useState<string>("default");
  const [isOpen, setIsOpen] = useState(false);

  useEffect(() => {
    const theme = getCurrentTheme();
    setCurrentThemeState(theme);
  }, []);

  const handleThemeChange = (themeName: string) => {
    setCurrentTheme(themeName);
    setCurrentThemeState(themeName);
    setIsOpen(false);
  };

  const currentThemeData = themes.find(t => t.name === currentTheme);

  return (
    <div className={className}>
      <Button
        variant="outline"
        size="sm"
        onClick={() => setIsOpen(!isOpen)}
        className="gap-2"
      >
        <Palette className="h-4 w-4" />
        主题
        {currentThemeData && (
          <Badge variant="secondary" className="ml-1">
            {currentThemeData.label}
          </Badge>
        )}
      </Button>

      {isOpen && (
        <div className="absolute top-full right-0 mt-2 w-80 z-50">
          <Card>
            <CardHeader>
              <CardTitle className="flex items-center gap-2">
                <Palette className="h-5 w-5" />
                选择主题
              </CardTitle>
              <CardDescription>
                选择您喜欢的主题配色方案
              </CardDescription>
            </CardHeader>
            <CardContent className="space-y-3">
              {themes.map((theme) => (
                <div
                  key={theme.name}
                  className={`p-3 rounded-lg border cursor-pointer transition-all hover:shadow-md ${
                    currentTheme === theme.name
                      ? "border-primary bg-primary/5"
                      : "border-border hover:border-primary/50"
                  }`}
                  onClick={() => handleThemeChange(theme.name)}
                >
                  <div className="flex items-center justify-between">
                    <div className="flex-1">
                      <div className="flex items-center gap-2 mb-1">
                        <h4 className="font-medium">{theme.label}</h4>
                        {currentTheme === theme.name && (
                          <Check className="h-4 w-4 text-primary" />
                        )}
                      </div>
                      <p className="text-sm text-muted-foreground">
                        {theme.description}
                      </p>
                    </div>
                    <div className="flex gap-1">
                      {/* 主题预览色块 */}
                      <div
                        className="w-4 h-4 rounded border"
                        style={{ backgroundColor: theme.colors.light["--primary"] }}
                      />
                      <div
                        className="w-4 h-4 rounded border"
                        style={{ backgroundColor: theme.colors.light["--secondary"] }}
                      />
                      <div
                        className="w-4 h-4 rounded border"
                        style={{ backgroundColor: theme.colors.light["--accent"] }}
                      />
                    </div>
                  </div>
                </div>
              ))}
            </CardContent>
          </Card>
        </div>
      )}
    </div>
  );
} 